<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>demo</title>
		<link rel="stylesheet" href="../../assets/libs/layui/css/layui.css" />
		<link rel="stylesheet" href="../../assets/module/admin.css?v=315" />
		<title></title>
	</head>

	<body>
		<!-- 页面加载loading -->
		<div class="page-loading">
			<div class="ball-loader">
				<span></span><span></span><span></span><span></span>
			</div>
		</div>

		<!-- 正文开始 -->
		<div class="layui-fluid">

			<div class="layui-card" style="text-align:center;">
				<ul class="layui-nav">
					<li class="layui-nav-item">
						<a href="/reader/index">首&nbsp;页 </a>
					</li>
					<li class="layui-nav-item">
						<a href="/reader/research">搜&nbsp;索</a>
					</li>
					<li class="layui-nav-item layui-this">
						<a href="/reader/return">退&nbsp;书</a>
					</li>
					<li class="layui-nav-item">
						<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
						<dl class="layui-nav-child">
							<dd lay-unselect>
								<a href="javascript:;" ew-event="reset_reader">修改密码 </a>
							</dd>
							<dd lay-unselect>
								<a href="javascript:;" id="borrow">借书记录</a>
							</dd>
							<dd lay-unselect>
								<a href="/reader/login">退出</a>
							</dd>
						</dl>
					</li>
				</ul>
				<div class="layui-card-body table-tool-mini">
					<table class="layui-table" id="tableUser" lay-filter="tableUser" style="margin-top: 50px"></table>
				</div>
			</div>
		</div>
		<input type="hidden" th:value="${session.reader.id}"  id="reader_id">
		<!-- 表格操作列 -->
		<script type="text/html" id="tableBarUser">
			<a class="layui-btn layui-btn-xs" lay-event="return">还书</a>
		</script>
		<!-- js部分 -->
		<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
		<script type="text/javascript" src="../../assets/js/common.js?v=315"></script>
		<script>
			layui.use(['layer', 'form', 'dataGrid', 'carousel', 'table', 'util', 'admin', 'element', 'tableX'], function() {
				var $ = layui.jquery;
				var layer = layui.layer;
				var form = layui.form;
				var table = layui.table;
				var dataGrid = layui.dataGrid;
				var tableX = layui.tableX;
				$('#borrow').click(function () {
					layer.open({
						type: 1,
						title: false,
						area: '530px',
						offset: '100px',
						shade: .01,
						shadeClose: true,
						fixed: false,
						content: '<table id="lookSSXMTable" lay-filter="lookSSXMTable"></table>',
						success: function () {
							tableX.render({
								elem: '#lookSSXMTable',
								url: '/api/findRecordByReaderId?id='+ $('#reader_id').val(),
								page: true,
								cellMinWidth: 100,
								cols: [
									[
										{type: 'numbers'},
										{field: 'book_name', title: '书名', sort: true},
										{field: 'borrow_time', title: '借书时间', sort: true},
										{field: 'return_time', title: '还书时间', sort: true}
									]
								],
								size: ''
							});
						}
					});
				})
				// 渲染表格
				var insTb = table.render({
					elem: '#tableUser',
					url: '/api/notReturnBooks',
					page: true,
					toolbar: true,
					cellMinWidth: 100,
					cols: [
						[{
								type: 'numbers',
								title: '#'
							}
							,{field: 'book_name', sort: true, title: '书名'}
							,{field: 'publishers', sort: true, title: '出版社'}
							,{field: 'borrow_time', sort: true, title: '借书时间'}
							,{
								align: 'center',
								toolbar: '#tableBarUser',
								title: '操作',
								minWidth: 200
							}
						]
					]
				});

				// 工具条点击事件
				table.on('tool(tableUser)', function(obj) {
					var data = obj.data;
					var layEvent = obj.event;
					if(layEvent === 'return') { // 删除
						returnBook(data.reader_id,data.book_id, data.book_name);
					}
				});

				// 重置密码
				function returnBook(reader_id,book_id, book_name) {
					layer.confirm('确定要还《' + book_name + '》吗？', {
						skin: 'layui-layer-admin',
						shade: .1
					}, function(i) {
						layer.close(i);
						layer.load(2);
						$.get('/api/returnBook', {
							reader_id: reader_id,
							book_id: book_id
						}, function(res) {
							layer.closeAll('loading');
							if(res.code == 200) {
								layer.msg(res.msg, {icon: 1});
								insTb.reload({}, 'data');
							} else {
								layer.msg(res.msg, {
									icon: 2
								});
							}
						}, 'json');
					});
				}

			});
		</script>
	</body>

</html>